<template>
  <div class="upload-box">
    <el-upload

      action="#"
      list-type="picture-card"
      :http-request="uploadFn"
      :limit="1"
      :file-list="fileList"
      :class="{display: fileList.length>0}"
      :on-remove="remove"
    >
      <i class="el-icon-plus" />
    </el-upload>
    <!-- 进度条：当开始上传且未上传完成之前 显示 -->
    <el-progress v-if="percent>0 && percent<100" type="circle" :percentage="percent" />
  </div>
</template>

<script>
var COS = require('cos-js-sdk-v5')

// SECRETID 和 SECRETKEY请登录 https://console.cloud.tencent.com/cam/capi 进行查看和管理
var cos = new COS({
  SecretId: 'AKID3wa3HEuKTLwGJ5aolRqyqSothFWWGlyu',
  SecretKey: 'g6E5fxzlGUR7WeV6RVO0KN9fusZz80bw'
})
export default {
  data() {
    return {
      fileList: [],
      percent: 0

    }
  },
  methods: {
    // 删除图片
    remove() {
      this.fileList = []
    },
    // 图片上传
    uploadFn(data) {
      this.fileList = [{ url: '' }]
      cos.putObject({
        Bucket: 'hr-project-80-1314002087', /* 必须 */
        Region: 'ap-nanjing', /* 存储桶所在地域，必须字段 */
        Key: Date.now().toString(), /* 必须 */
        StorageClass: 'STANDARD',
        Body: data.file, // 上传文件对象
        onProgress: (progressData) => {
          // console.log(JSON.stringify(progressData))
          this.percent = progressData.percent * 100
        }
      }, (err, data) => {
        if (!err) {
          // this.fileList.push({
          //   url: 'https://' + data.Location

          // })
          this.fileList[0].url = 'https://' + data.Location
        }
        console.log(36, err, data)
      })
    }
  }
}
</script>

<style lang='scss' scoped>
.upload-box{
    display: inline-block;
    position:relative

}
.display{
    ::v-deep .el-upload--picture-card{
      display: none;
    }
}
.el-progress{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
</style>
